<template>
  <view class="minepage">
    <view class="user">
      <image
        v-if="formData.avatar"
        :src="formData.avatar"
        style="width: 100px; height: 100px; border-radius: 50%"></image>

      <u-icon v-else name="account-fill" size="80" color="#c9c9c9"></u-icon>
    </view>
    <view class="name">
      <button
        open-type="chooseAvatar"
        @chooseavatar="getUserProfile"
        style="width: 50%">
        点击获取头像
      </button>
      <input
        style="margin-top: 10px"
        type="nickname"
        maxlength="20"
        v-model="formData.username"
        placeholder="点击获取昵称"
        @change="handleChange" />
      <!-- <view v-else style="margin-top: 10px">{{ formData.username }}</view> -->
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { setName, getMsg } from "@/api/mainapi.js";
export default {
  data() {
    return {
      formData: {
        username: "",
        avatar: "",
      },
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onShow() {
    if (uni.getStorageSync("userInfo")) {
      this.getMsg();
    } else {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }
  },
  methods: {
    getUserProfile(e) {
      // if (!uni.getStorageSync("userInfo")) {
      //   uni.navigateTo({
      //     url: "/pages/login/login",
      //   });
      // }

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: this.$Config.HTTP_REQUEST_URL + "/api/common/ossUpload", // 仅为示例，非真实的接口地址
          filePath: e.detail.avatarUrl,
          name: "file",
          formData: {
            file: e.detail.avatarUrl,
          },
          header: {
            token: uni.getStorageSync("userInfo").token,
          },
          success: (res) => {
            if (res.statusCode === 200) {
              this.formData.avatar = JSON.parse(res.data).code.fullurl;
              this.setName();
            }
          },
        });
      });
    },
    handleChange(e) {
      // if (!uni.getStorageSync("userInfo")) {
      //   uni.navigateTo({
      //     url: "/pages/login/login",
      //   });
      // }
      this.formData.username = e.detail.value.trim();
      this.setName();
    },
    async getMsg() {
      const res = await getMsg();
      if (res.response.statusCode === 200) {
        this.formData.username = res.data.data.nickname;
        this.formData.avatar = res.data.data.avatar;
      }
    },
    async setName() {
      const res = await setName({
        avatar: this.formData.avatar,
        nickname: this.formData.username,
        token: uni.getStorageSync("userInfo").token,
      });
      if (res.response.statusCode === 200) {
      }
    },
  },
};
</script>

<style scoped lang="scss">
.minepage {
  width: 100%;
  height: 100vh;
}
.minepage .user {
  display: flex;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  border-radius: 50%;
  margin: 300rpx auto 0;
}
.minepage .name {
  text-align: center;
  margin-top: 20px;
}
</style>
